<template>
	<view class="page notice-group">
		<nav-header title="群聊申请" :show-right="false">
		</nav-header>

		<up-loading-page :loading="loading"></up-loading-page>
		<view class="group">
			<view v-for="(item,index) in applyList" :key="item.id" class="group-item">
				<view class="item-left">
					<!-- <img :src="item.headImage" alt="" class="left-img"> -->
					<view class="fc">
						<head-image :url="item.headImageThumb" :name="item.groupName" :size="90"
							:isGroup="true"></head-image>
						<view class="left-text">
							<text class="nickname">{{ item.groupName }}</text>
							<!-- <text class="message">附加信息：{{ item.context }}</text> -->
							<view style="display: flex;align-items: center;gap: 8rpx;">
								<svg-icon icon="人数" :width="32"></svg-icon>
								<text class="text-sm-Regular">{{item.memberSize}}人</text>
							</view>
						</view>
					</view>
					<view class="text-xs-Medium" style="width: 110rpx;text-align: right;">
						<text v-if="isMy && item.status == 0" style="color: #F79009;">等待验证</text>
						<text v-if="item.status==1" style="color: #A4A7AE;">已添加</text>
						<text v-if="item.status==2" style="color: #A4A7AE;">已拒绝</text>
					</view>
				</view>
				<view class="greetings">
					<text class="text-sm-Regular message">附加信息：{{item.context}}</text>
				</view>
				<up-line v-if="item.status==0 && !isMy"></up-line>
				<view class="item-right" v-if="item.status==0 && !isMy">
					<!-- <up-button type="primary" size="mini" @click="Agree(item.id)"
						v-if="item.status == 0 && !isMy">同意</up-button> -->
					<button class="refuse" plain type="primary" size="mini" v-if="item.status==0 && !isMy"
						@tap="Refuse(item.id)">
						<text class="text-xs-Medium">拒绝</text>
					</button>
					<button class="agree" type="primary" size="mini" v-if="item.status==0 && !isMy"
						@tap="Agree(item.id)">
						<text class="text-xs-Medium">通过申请</text>
					</button>
				</view>
				<up-divider v-if="index!=applyList.length-1" style="margin:unset;"></up-divider>
			</view>
			<view v-if="applyList.length==0 && !loading" style="margin-top: 50%;">
				<up-empty :icon="getResource('/icon/empty-message.svg')"  text="暂无数据">
				</up-empty>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupList: [],
				applyList: [],
				pageNum: 1,
				pageSize: 10,
				loading: false,
				hasMore: true
			}
		},
		onShow() {
			this.getData()
		},
		computed: {
			isMy() {
				let result = false;
				this.applyList.forEach(item => {
					if (item.userId === this.userStore.userInfo.id) {
						result = true;
					} else {
						result = false
					}
				});
				return result;
			}
		},
		methods: {
			getData() {
				if (this.loading) return
				this.loading = true
				this.$http({
					url: `/systemMessage/findSystemMessageByType?type=54&pageNum=${this.pageNum}&pageSize=${this.pageSize}`,
					method: "POST"
				}).then((data) => {
					if (data.records.length > 0) {
						data.records.forEach(item => {
							if (item.messageDetail) {
								const messageDetail = JSON.parse(item.messageDetail);
								this.applyList.push(messageDetail)
							}
						})
						this.pageNum++
					} else {
						this.hasMore = false
					}
					this.loading = false
				})
			},
			Agree(id) {
				let data = {
					id: id
				}
				this.$http({
					url: "/group/approveApplyGroup",
					method: "POST",
					data: data
				}).then(() => {
					uni.showToast({
						title: "操作成功",
						icon: 'none'
					})
					this.loading = false
					this.pageNum = 1
					this.applyList = []
					this.getData()
				})
			},
			Refuse(id) {
				let data = {
					id: id
				}
				this.$http({
					url: `/group/refuseApplyGroup`,
					method: "POST",
					data: data
				}).then((data) => {
					uni.showToast({
						title: '已拒绝',
						icon: 'none'
					})
					this.loading = false
					this.pageNum = 1
					this.applyList = []
					this.getData()
				})
			}
		},
		onReachBottom() {
			if (this.hasMore && !this.loading) {
				this.getData();
			}
			if (!this.hasMore) {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none'
				});
				return
			}
		},
	}
</script>

<style lang="scss" scoped>
	.notice-group {
		.group {
			width: 100%;

			.group-item {
				padding: 30rpx;
				display: flex;
				flex-direction: column;
				gap: 16rpx;

				.item-left {
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.fc{
						display: flex;
						align-items: center;
						gap: 16rpx;
					}

					.left-img {
						width: 100rpx;
						height: 100rpx;
					}

					.left-text {
						display: flex;
						flex: 1;
						flex-direction: column;
						font-size: 27rpx;
						gap: 10rpx;
						color: #6f6f6f;

						.nickname {
							color: #000;
							font-size: 32rpx;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.message {
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
							margin-top: 20rpx;
							width: 450rpx;
						}
					}
				}
				
				.greetings {
					color: $gray-400;
					padding-bottom: 8rpx;
				}

				.item-right {
					padding: 8rpx 0;
					text-align: right;
					
					.refuse {
						border: 1rpx solid $gray-400;
						color: $gray-400;
						border-radius: 34rpx;
						padding: 8rpx 24rpx;
						height: 56rpx;
						line-height: 36rpx;
						margin-right: 24rpx;
					}
					
					.agree {
						background-color: $brand-500;
						color: $white;
						border-radius: 34rpx;
						padding: 8rpx 24rpx;
						height: 56rpx;
						line-height: 36rpx;
					}
				}
			}
		}
	}
</style>